import React, { Component } from 'react'
import { ajax } from '@/utils/ajax'
export default class DataDemo extends Component {
    state = {
        list: []
    }
    componentDidMount() {
        // ajax.get('http://39.108.55.194:3000/vue/movie')
        ajax.get('localhost:3000/vue/movie')
            .then(res => {
                console.log(res);
                if (res.data.code == 200) {
                    this.setState({
                        list: res.data.result
                    })
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
    render() {
        const { list } = this.state
        return (
            <div>
                <h3>react模拟封装promise + ajax</h3>
                <div style={{ width: '100%', padding: 10, boxSizing: 'border-box' }}>
                    {
                        list.map((item, i) => (
                            <MyListItem key={i} item={item} />
                        ))
                    }
                </div>
            </div>
        )
    }
}


export const MyListItem = ({ item }) => (
    <div>
        <img src={item.images.large.replace(/img7/, 'img3')} alt="" />
        <p>{item.title}</p>
    </div>
)